<template>
    <div class="product">
        <el-row :gutter="25" v-for="(r, index) in 1" :key="r">
            <el-col :span="6" v-for="(item,o) in proList" :key="o">

                <el-card class="productCard" shadow="hover">
                    <el-image
                            style="width: 100%;height: 250px"
                            :src="imgURL+item.pic1"
                            :fit="fit"
                            @click="detail(item)">
                    </el-image>

                    <div style="padding: 20px;">
                        <div v-if="list==1">{{item.historyDate}}</div>
                        <span><img src="../../assets/image/storeIcon.png" @click="storePage(item)">{{item.storeName}}</span>
                        <h4>{{item.productName}}</h4>
                        <div style="float: right;font-size: 5px;">销量：{{item.sales}}</div>
                        <h3>{{item.unitprice+'￥'}}</h3>

                        <div class="delete">
                            <el-button v-if="list==2" type="text" class="button" @click="deletePro()">删除</el-button>
                            <el-button v-else-if="list==3" type="text" class="button" @click="detail(item)">查看详情</el-button>
                        </div>
                        <div class="button">
                            <el-button v-if="list==1" type="text" class="button" @click="detail(item)">查看详情</el-button>
                            <el-button v-else-if="list==2" type="text" class="button" @click="edit(item.productNo)">修改</el-button>
                            <el-button v-else-if="list==3" type="text" class="button" @click="buy()">购买</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!--购买-->
        <el-drawer
                :visible.sync="drawer"
                :direction="direction"
                size="18%">
            <div style="float: right">
                <el-form :model="buyForm" ref="buyForm" :inline="true">
                    <el-form-item prop="totalPrice">
                        <span>{{'合计:'+buyForm.totalPrice}}</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="buyTotal('buyForm')" class="buyBtn" round >确认下单</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>

        <!--编辑弹框-->
        <el-dialog  class='publishDialog' title="修改已发布商品信息" :visible.sync="dialogNewProVisible" center :append-to-body='true'>
            <el-form :model="publishForm" :rules="publishRule" ref="publishForm">
                <el-form-item  prop="image">
                    <el-upload
                            v-model="this.imageURL+publishForm.image"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item prop="name" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="publishForm.productName" placeholder="商品名称" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item prop="price" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="publishForm.balance" placeholder="商品单价" @keyup.enter.native="publish('publishForm')"></el-input>
                </el-form-item>
                <el-form-item prop="type" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="publishForm.quantity" placeholder="商品库存" @keyup.enter.native="publish('publishForm')"></el-input>
                </el-form-item>
                <el-form-item  prop="info" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input type="textarea"  v-model="publishForm.productIntroduction" placeholder="商品介绍"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" class="publishBtn" @click="publish('publishForm')"
                               onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                               onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                               round>发布修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script >
    import {isvalidNull} from "../util";
    import POST from "../../api/POST";
    import API_PRO from "../../api/API_PRO";
    import Cookie from "js-cookie"


    export default {
        props:['list','title','proList'],
        name: "productList",
        data() {
            var validateType = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('库存不能为空'))
                } else {
                    callback()
                }
            }
            var validatePrice = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('单价不能为空'))
                } else {
                    callback()
                }
            }
            return{
                imgURL : API_PRO.imageURL,
                fit: 'cover',
                direction: "btt",
                drawer: false,
                dialogNewProVisible: false,
                dialogImageUrl: '',
                dialogVisible: false,
                proForm: {
                    name: '',
                    num: ''
                },
                publishForm: {
                    image: '',
                    name: '',
                    type: '',
                    price: '',
                    info: ''
                },
                publishRule: {
                    type: [
                        { required: true, trigger: 'blur', validator: validateType }
                    ],
                    balance: [
                        { required: true, trigger: 'change', validator: validatePrice }
                    ]
                },
                buyForm: {
                    totalPrice: ''
                },

            }
        },
        methods: {
            async buyTotal (buyForm) {
                this.drawer = false
                this.$message({
                    message: '下单成功',
                    type: 'success'
                })
            },
            handleChange(value) {
                console.log(value);
            },
            storePage(item) {
                this.$router.push({path: `/customer/store/`+ item.salerAccount})

            },
            deletePro(productno) {
                this.$confirm('确定要删除吗?', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    data = {
                        token:Cookie.get('token'),
                        productno:productno,

                    }
                    POST.deleteProduct(data).then(res=>{

                    })

                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }).catch(() => {
                        console.log('取消删除')
                    })
            },
            detail(item) {
                this.$router.push({path: `/customer/store/`+ item.salerAccount + `/`+item.productNo})
                console.log(item)
            },
            submit() {
                let data = {
                    saleraccount:111,
                    productno:111,
                    costumeraccount:111,
                }
                POST.uniproduct(data).then(res=>{
                    console.log(res)
                })

            },

            edit(productno) {
                let data ={
                    token:Cookie.get('token'),
                    productno:productno,
                }
                POST.suniProduct(data).then(res=>{
                    this.publishForm = res[0]
                })
                this.dialogNewProVisible = true
            },
            async publish(publishFrom) {
                this.$refs.publishForm.validate(valid => {
                    if (valid) {
                        this.dialogNewProVisible = false
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        })
                    } else {
                        console.log('error submit!!')
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            buy() {
                this.drawer = true
            }
        }
    }
</script>

<style scoped>
    .product{
        margin-left: 1%;
        margin-right: 1%;
    }
    .productCard{
        width: 100%;
        height: 400px;
    }
    .button {
        float: right;
    }
    .delete {
        float: left;
    }
    .publishBtn{
        width: 100%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: #ff7a88;
        border:solid 2px #ff7a88;
    }
    .buyBtn{
        width: 100%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: rgb(245, 110, 20);
        border-width: 0;
        transition: 1s;
    }

</style>
<style>
    .el-card__body{
        padding: 0px;

    }
</style>
